<template>
  <div class="city-select">
    <div @click="showAction">
      <slot v-bind:code="code" v-bind:label="label"></slot>
    </div>
    <van-action-sheet 
      v-model="show" 
      ref="actionSheet"
      title 
      :actions="actions" 
      :lock-scroll="false"
      :close-on-click-action="!multiple" 
      @select="onSelect" 
      >
    </van-action-sheet>
  </div>
</template>

<script>


export default {
  props: {
    value:{
      type:String,
      default:''
    },
    multiple:{
      type:Boolean,
      default:false
    },
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default() {
        return []
      }
    },
  },
  data() {
    return {
      show: false,
      code: '',
      label: '',
      actions: [],
      className:'van-icon van-icon-success'
    }
  },
  watch: {
    value:{
      immediate:true,
      handler(v){
        this.code=v;
        this.updateLabel();
      },
    },
    list: {
      immediate: true,
      handler(v) {
        //this.code=v; item
        this.actions = v;
        this.updateLabel();
      }
    }
  },
  methods: {
    updateLabel(){
      let label = ''
      const v=this.value
        if(v && this.list.length){
          
          const map = this.list.reduce((o,cur)=>{
            
            if(v.includes(cur.code)){
              this.$set(cur,'className',!cur.className?this.className:cur.className.includes(this.className)?cur.className: cur.className+' '+this.className)
            }else{
              this.$set(cur,'className',!cur.className?'':cur.className.replace(this.className,''))
            }
            return o[cur.code]=cur.name,o
          },{});
          label = v.split(',').map(code=>map[code]||'').join(',');

        }else if(!v && this.list.length){
          this.list.forEach(item=>{
            this.$set(item,'className','')
          })
        }

        this.label=v?label:''
    },
    onCancel() {
    },
    showAction() {
      this.show = true
    },
    
    toggleIcon(item,callback){
      const {className}=this;
      let type = ''
      if(!item.className){
         type = 'add'
        this.$set(item,'className',className)
      }else if(!item.className.includes(className)){
        type = 'add'
         this.$set(item,'className',item.className+' '+className)
      }else if(item.className.includes(className)){
        type = 'remove'
         this.$set(item,'className',item.className.replace(className,''))
      }
      callback && callback(type);
    },
    onSelect(item = {}) {
      const { name = '', code = '' } = item
      if(!this.multiple){
        this.code = code
        this.label = name
        this.show = false
        this.$emit('select', item)
      }else{
        let {code:curCode,label:curLabel}=this
        
        if(!curCode.includes(code)){
              curCode +=(!curCode? code:','+code);
              curLabel +=(!curLabel? name:','+name);
          }else{
            curCode =curCode.replace(code,'').replace(/^,|,$|,(,)/g,'$1');
            curLabel =curLabel.replace(name,'').replace(/^,|,$|,(,)/g,'$1');
          }

        this.code = curCode
        this.label = curLabel
        
        this.$emit('input',curCode)
        this.$emit('select', {curCode,curLabel})
      }
      
    }
  }
}
</script>

<style lang="less" scoped>
.city-select {
  display: inline-block;
  vertical-align: top;

}
</style>